<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>PDF 发票预览解决方案</title>
    <style>
      :root {
        --page-margin: 20px;
        --container-padding: 20px;
      }

      #pdf-container {
        max-width: 1000px;
        margin: 0 auto;
        padding: var(--container-padding);
        background: #f8f9fa;
      }

      .pdf-page {
        position: relative;
        margin: var(--page-margin) auto;
        overflow: visible;  rgba(0,0,0,0.1
        background: white;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }

      .loading {
        position: fixed;
        top: 50%;
        left: 50%;
        color: #666;
        font-size: 1.2em;
        transform: translate(-50%, -50%);
      }
    </style>
  </head>
  <body>
    <div class="loading">PDF加载中...</div>
    <div id="pdf-container"></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.5.207/pdf.min.js"></script>
    <script>
      // 配置 PDF.js
      pdfjsLib.GlobalWorkerOptions.workerSrc =
        "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.5.207/pdf.worker.min.js";

      // 替换为你的PDF路径
      //   const pdfUrl = "https://fhnpxw.peixunyun.cn/2803ef069ae74de99f5ad579b094f2d0.pdf";
      //   const pdfUrl = "https://fhnpxw.peixunyun.cn/6cbb02b8a7ee49afa0604d8b6bc5da95.pdf";
    //   const pdfUrl =
    //     "https://fhnpxw.peixunyun.cn/648fe854a556436797b4b0fbb163d4d3.pdf";


	const pdfUrl = "https://fhnpxw.peixunyun.cn/5deab8d4b03241108b3227329ba908c6.pdf";

      async function renderPDF() {
        try {
          // 加载文档
          const pdf = await pdfjsLib.getDocument(pdfUrl).promise;
          document.querySelector(".loading").style.display = "none";

          const container = document.getElementById("pdf-container");
          const containerWidth = container.clientWidth - 40; // 留出边距

          // 逐页渲染
          for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
            const page = await pdf.getPage(pageNum);

            // 创建页面容器
            const pageDiv = document.createElement("div");
            pageDiv.className = "pdf-page";
            container.appendChild(pageDiv);

            // 动态计算缩放比例
            const viewport = page.getViewport({ scale: 1 });
            const scale = containerWidth / viewport.width;
            const scaledViewport = page.getViewport({ scale });

            // 处理横向页面
            if (scaledViewport.width > scaledViewport.height) {
              pageDiv.style.maxWidth = "100%";
              pageDiv.style.overflowX = "auto";
            }

            // 创建 Canvas
            const canvas = document.createElement("canvas");
            const context = canvas.getContext("2d");

            // Retina 屏适配
            const pixelRatio = window.devicePixelRatio || 1;
            canvas.width = scaledViewport.width * pixelRatio;
            canvas.height = scaledViewport.height * pixelRatio;
            canvas.style.width = `${scaledViewport.width}px`;
            canvas.style.height = `${scaledViewport.height}px`;
            context.scale(pixelRatio, pixelRatio);

            pageDiv.appendChild(canvas);

            // 高精度渲染
            await page.render({
              canvasContext: context,
              viewport: scaledViewport,
              intent: "print", // 关键参数：提升渲染精度
            }).promise;
          }
        } catch (err) {
          console.error("PDF 渲染失败:", err);
          document.querySelector(".loading").textContent =
            "PDF加载失败，请检查文件路径";
        }
      }

      // 初始化渲染
      renderPDF();

      // 窗口大小变化时重新渲染
      let resizeTimer;
      window.addEventListener("resize", () => {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(() => {
          document.getElementById("pdf-container").innerHTML = "";
          renderPDF();
        }, 300);
      });
    </script>
  </body>
</html>
